<template>
<!--    评论区-->
<el-card class="box-card">

      <div v-if="postList.length===0">当前暂无发帖,尝试发个帖子吧！
        <el-button type="primary" @click="dialogVisible=true">发帖子</el-button>
      </div>
<!--      帖子列表-->
      <div v-for="(item,index) in  postList" :key="item.id" class="text-item">
        <div class="h">
          <h5>{{item.userName}}  <span v-if="loginUsername===item.userName"> (我)</span>  </h5>
<button v-if="loginUsername===item.userName"  @click="deletedialogVisible = true,deletePostId=item.id"><el-icon><Delete /></el-icon></button>
        </div>

        <el-dialog
            class="deleteDialog"
            :modal="false"
            v-model="deletedialogVisible"
            title="删除"
            width="500"
            :showClose="false"
        >
          <span>确定要删除该条帖子吗</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="deletedialogVisible = false">取消</el-button>
              <el-button type="primary" @click="deletePost(deletePostId,index)">
                确定
              </el-button>
            </div>
          </template>
        </el-dialog>
          <h3 class="title1">{{item.title}}</h3>

        <div>:{{item.text}}</div>

<div class="-button--">
        <button  @click="pointer(item.id)"><el-icon><Pointer /></el-icon>{{item.likeNum}}</button>
        <button  @click="chat(item.id,index)"><el-icon><ChatDotRound /></el-icon></button>
        <button  @click="star"><el-icon><Star /></el-icon>{{item.favorNum}}</button>
</div>


<!--        展开评论-->
        <div v-if="isChatList[index]">
          <el-input :placeholder="'回复'+item.userName+':'"   v-model="submitCommentList[index]"></el-input>
          <el-button class="comment" type="primary" @click="submitComment(item.id,index)"  :disabled="!submitCommentList[index]">评论</el-button>

          <h2 v-if="commentList[index]">共{{commentList[index].length}}条评论</h2>
          <hr>

          <div v-for="(item1,index1) in  commentList[index]" :key="item1.id" class="text-item">
            <div class="h">
            <h5>{{item1.userName}}  <span v-if="loginUsername===item1.userName"> (我)</span>  </h5>
            <button v-if="loginUsername===item1.userName"  @click="deleteCommentdialogVisible = true;deleteCommentId=item1.id"><el-icon><Delete /></el-icon></button>
            </div>

<!--            删除评论dialog-->
            <el-dialog
                class="deleteDialog"
                :modal="false"
                v-model="deleteCommentdialogVisible"
                title="删除"
                width="500"
                :showClose="false"
            >
              <span>确定要删除该条评论吗</span>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="deleteCommentdialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="deleteComment(deleteCommentId,item.id,index)">
                    确定
                  </el-button>
                </div>
              </template>
            </el-dialog>


            <div>:{{item1.text}}</div>

            <div class="-button--">
              <button  @click="pointer(item1.id)"><el-icon><Pointer /></el-icon>{{item1.likeNum}}</button>
              <button  @click="star"><el-icon><Star /></el-icon>{{item1.favorNum}}</button>
            </div>
            <hr v-if="index1+1 !== commentList[index].length">


          </div>

        </div>


        <hr v-if="index+1 !== postList.length">

      </div>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      width="60%"
      :showClose="false"
      :closeOnClickModal="false">
      <div class="f">
      <h5>发布帖子</h5>
      </div>
      <hr>
      <el-input placeholder="请用简练的文字描述问题,并以“？”结尾" v-model="title" class="title"></el-input>
      <el-input  v-model="text" type="textarea" :rows="10" placeholder="请输入内容"></el-input>

      <div class="footer">
          <el-button @click="dialogVisible = false,title='',text=''">取 消</el-button>
          <el-button type="primary" @click="submitPost">发 布</el-button>
      </div>
    </el-dialog>


</template>

<script>
import API from '@/api/communitation'
import {Document} from "@element-plus/icons-vue";
export default {
  components: {Document},
  data() {
    return {
      deleteCommentId:null,
      deletePostId:null,

      dialogVisible:false,
      title:'',
      text:'',
      postList:[],
      isChatList:[],
      submitCommentList:[],
      commentList:[],
      loginUsername:'',
      deletedialogVisible:false,
      deleteCommentdialogVisible:false,
    };
  },
  mounted() {
    this.listPost()
    this.setUsername()
  },
  created(){
    this.name = localStorage.getItem('loginusername')
    
  },
  methods: {
//设置用户名进localStorage备用
      setUsername (){
      let token = localStorage.getItem('token')
      let userphone =localStorage.getItem('loginuserphone')
        API.userInfolist({
        "size": 1,
        "current": 1,
        "phone": userphone
      },token).then(res=>{
          console.log(res,6666)
        let username=res.data.content.records[0].username
        this.loginUsername=username
        localStorage.setItem('loginusername',username)
      }).catch(error=>{
        console.log(error)
      })
    },

    //发表评论
    submitComment(id,index){
        if(this.submitCommentList[index]){
          let param={}
          param.communicationId=id
          param.text=this.submitCommentList[index]
          let token=localStorage.getItem('token')
          API.createComment(param,token).then(res=>{
            if(res.data.code==='0'){
              this.$message.success('评论成功')
              this.submitCommentList[index]=''
              this.listComment({
                communicationId:id
              },token,index)
            }
          }).catch(err=>{
            console.log(err)
          })
        }

    },

    //点赞
    pointer(){

    },

    //查询评论
    listComment(param,token,index){
      API.queryComentList(param,token).then(res=>{
        this.commentList[index]=res.data.content.records
      }).catch(err=>{
        console.log(err)
      })
    },
    //点击评论
    chat(id,index){
      this.isChatList[index]=!this.isChatList[index]
      let token = localStorage.getItem('token')
      let param={
        communicationId:id
      }
      this.listComment(param,token,index)
    },

    //点击收藏
    star(){

    },

    //发布帖子
    submitPost(){
      this.dialogVisible=false
      let param={}
      param.title=this.title
      param.text=this.text
      let token =localStorage.getItem('token')
       API.createCommunication(param,token).then(res=>{
         if(res.data.code==='0'){
           this.$message.success('发布成功')
           this.title=''
           this.text=''
           this.listPost()
         }
       }).catch(error=>{
         console.log(error)
       })
    },
    //查询所有帖子
    listPost(){
      let token=localStorage.getItem('token')
      let param={
      }
      API.listCommunication(param,token).then(res=>{
        if(res.data.code==='0'){
          this.postList=[]
          for(let j=0;j<res.data.content.records.length;j++){
            if(res.data.content.records[j].userName===this.name){
              this.postList.push(res.data.content.records[j])
            }
          }
          console.log(this.postList,66666)
          this.isChatList=[]
          for(let i=0;i<this.postList.length;i++){
            this.isChatList.push(false)
          }
        }
        console.log("11111111111111111111111")
        console.log(res)
        console.log("22222222222222222222222")
        console.log(this.postList)
      }).catch(err=>{
        console.log(err)
      })
    },

    //删除帖子
    deletePost(id,index){
      console.log(id,'id');
      console.log(this.deletePostId,'deleid')
      if(id===this.deletePostId){
        this.deletedialogVisible=false
        let token =localStorage.getItem('token')
        API.deleteCommunication({
          id:id
        },token).then(res=>{
          if(res.data.code==='0'){
            this.$message.success('删除成功')
            this.submitCommentList=[]
            this.commentList.splice(index,1)
            this.listPost()
          }
        }).catch(err=>{
          console.log(err)
        })
      }
      else{
        console.log(111)
      }
    },
    //删除评论
    deleteComment(id,communicationId,index){
        this.deleteCommentdialogVisible=false
      let token=localStorage.getItem('token')
      API.deleteComent({
        id:id
      },token).then(res=>{
        if(res.data.code==='0'){
          this.$message.success('评论删除成功')
          this.listComment({
            communicationId:communicationId
          },token,index)
        }
      })
    }
  }
  
};
</script>

<style scoped>
 .text-item .h button{
  border: none;
  background-color: white;
  outline: none;
}
 .text-item .-button--{
   margin-top: 25px;
 }
 .text-item .-button-- button {
   margin-right: 25px;
   border: none;
   background-color: white;
   outline: none;
 }
 .comment{
   margin-left: 0%;
   margin-top: 15px;
 }
</style>